<template>
  <!-- 订单管理 -->
  <div>
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <el-row>
          <el-col :span="6">
            <el-form-item label="子订单编号">
              <el-input v-model="queryParam.id"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="订单类型">
              <el-select v-model="queryParam.typeId" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option label="即开类" value="1"></el-option>
                <el-option label="物流类" value="2"></el-option>
                <el-option label="施工类" value="3"></el-option>
                <el-option label="签约类" value="4"></el-option>
                <el-option label="周期服务类" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="订单来源渠道">
              <el-select v-model="queryParam.sourceId" placeholder="请选择" @change="queryService(queryParam.sourceId)">
                <el-option label="全部" value=""></el-option>
                <el-option label="新电商" value="1"></el-option>
                <el-option label="家宽" value="2"></el-option>
                <el-option label="政企" value="3"></el-option>
                <el-option label="个人业务" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="支付渠道">
              <el-select v-model="queryParam.orderPayId" placeholder="请选择">
                <el-option label="全部" value=""></el-option>
                <el-option label="支付宝" value="1"></el-option>
                <el-option label="微信" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="省">
              <el-select v-model="queryParam.province" placeholder="请选择">
                <el-option label="全部" value=""></el-option>

                <el-option :label="province.name" :value="province.name" v-for="province in provinceList"
                  :key="province.adcode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="用户ID">
              <el-input v-model="queryParam.userTelephone"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="商品名称">
              <el-input v-model="queryParam.itemName"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="订单状态">
              <el-select v-model="queryParam.status" placeholder="请选择">
                <!-- 遍历 -->
                <el-option v-for="item in statusOptions" :key="item.id" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="订单业务类型">
              <el-select v-model="queryParam.orderServiceTypeId" placeholder="请选择">
                <!-- 遍历 -->
                <el-option v-for="service in serviceList" :key="service.id" :label="service.serviceName"
                  :value="service.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="下单时间" required>
              <el-date-picker v-model="queryParam.buyTimeList" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="下单时间最低" range-separator="~" end-placeholder="下单时间最高">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="queryButton">查询</el-button>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="ResetButton">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div>
      <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column prop="id" label="子订单编号" sortable width="180">
          <template v-slot="item">
            <el-button type="text" @click="routeChild(item.row.childIdStr)">{{ item.row.childIdStr }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="orderNum" label="主订单编号" sortable width="180">
          <template v-slot="item">
            <el-button type="text" @click="routeDetail(item.row.idStr)">{{ item.row.idStr }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="userTelephone" label="用户ID">
        </el-table-column>
        <el-table-column prop="itemName" label="商品信息">
        </el-table-column>
        <el-table-column prop="itemCost" label="商品资费">
        </el-table-column>
        <el-table-column prop="sourceName" label="订单来源渠道">
        </el-table-column>
        <el-table-column prop="totalPrice" label="订单金额">
        </el-table-column>
        <el-table-column prop="province" label="省">
        </el-table-column>
        <el-table-column prop="status" label="订单状态">
          <template v-slot="item">
            {{ getStatusName(item.row.status) }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>
      <el-pagination :total="total" :current-page="pageNum" :page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
        @current-change="pageNumChange" @next-click="pageNumChange" @prev-click="pageNumChange"
        @size-change="pageSizeChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      pageNum: 1,
      pageSize: 10,
      // 订单业务类型数组
      serviceList: [],
      // 省数组
      provinceList: [],
      // 查询参数
      queryParam: {
        typeId: "",
        sourceId: "",
        orderPayId: "",
        province: "",
        status: "",
        orderServiceTypeId: ""
      },
      // 显示数组
      tableData: [
        {
          childIdStr: "1",
          idStr: "123",
          userTelephone: "18912345678",
          itemName: "商品A",
          sourceName: "新电商",
          totalPrice: "￥100",
          province: "江苏",
          status: "已完成",
        },

        {
          childIdStr: "2",
          idStr: "123",
          userTelephone: "18912345678",
          itemName: "商品A",
          sourceName: "新电商",
          totalPrice: "￥100",
          province: "江苏",
          status: "已完成"
        }
      ],

      // 状态数组
      statusOptions: [
        { label: '待支付', value: '1' },
        { label: '办理中', value: '2' },
        { label: '交易关闭', value: '3' },
        { label: '已付款', value: '4' },
        { label: '已关闭', value: '5' },
      ],
      prePath: null,
    }
  },
  methods: {
    ResetButton() {
      this.queryParam = {}
      this.queryOrder();
    },
    queryButton() {
      this.pageNum = 1;
      this.queryOrder();
    },
    pageNumChange(val) {
      this.pageNum = val;
      this.queryOrder();
    },
    pageSizeChange(val) {
      this.pageSize = val;
      this.queryOrder();
    },
    // 向父组件传子订单id
    routeChild(orderNum) {
      this.$router.push({
        path: '/OrderChild',
        query: {
          "orderNum": orderNum,
          "pageNum": this.pageNum,
          "pageSize": this.pageSize
        }
      })
    },

    // 向父组件传主订单id
    routeDetail(orderNum) {
      // this.$emit('orderOrderNum', orderNum);
      this.$router.push({
        path: '/OrderDetail',
        query: {
          "orderNum": orderNum,
          "pageNum": this.pageNum,
          "pageSize": this.pageSize
        }
      })
    },

    // 根据订单服务id查询服务列表
    queryService(sourceId) {
      this.$axios.get("/api/staffOrder/queryServiceByTypeId/" + sourceId).then(response => {
        let resp = response.data;
        if (resp.code == 200) {
          this.serviceList = resp.data;
        }
      })
    },

    getStatusName(status) {
      switch (status) {
        case 1:
          return "待支付";
        case 2:
          return "办理中";
        case 3:
          return "办理失败";
        case 4:
          return "办理成功";
        case 5:
          return "取消订单";
        case 6:
          return "部分办理失败";
        case 7:
          return "部分取消";
        case 8:
          return "交易关闭";

        case 101:
          return "待支付";
        case 102:
          return "待成团";
        case 103:
          return "待审核";
        case 104:
          return "审核通过";
        case 105:
          return "开户成功";
        case 106:
          return "部分开户成功";
        case 107:
          return "开户失败";
        case 108:
          return "待发货";
        case 109:
          return "待收货";
        case 110:
          return "交易完成";
        case 111:
          return "交易关闭";
        case 112:
          return "待激活";
        case 113:
          return "已激活";
        case 114:
          return "部分激活";
        case 115:
          return "订单取消";
        case 116:
          return "部分取消";
      }
    },
    // 查询订单
    queryOrder() {
      let pageQueryParam = {};
      pageQueryParam.pageNum = this.pageNum;
      pageQueryParam.pageSize = this.pageSize;
      pageQueryParam.param = this.queryParam;
      this.$axios.post("/api/staffOrder/queryOrderList", pageQueryParam).then(response => {
        let resp = response.data;
        if (resp.code == 200) {
          let pageData = resp.data;
          this.tableData = pageData.records;
          this.total = pageData.total;
        }
      })
    },

    // 查所有省份
    queryProvince() {
      this.$axios.get("/getAddress/district?key=e4f38621cb745157368919568755a09a").then(response => {
        // 国家(国家数组的第一个值)
        let country = response.data.districts[0];
        // 省份数组
        this.provinceList = country.districts
      })
    }

  },
  created() {
    // 用于订单详情页回跳
    if (this.$route.query.pageNum != null && this.$route.query.pageSize != null) {
      this.pageNum = parseInt(this.$route.query.pageNum)
      this.pageSize = parseInt(this.$route.query.pageSize)
    }

    this.queryProvince();
    this.queryOrder();
  },
  mounted() { }
}
</script>

<style scoped></style>
